<script lang="ts" setup>
import { watch, ref, inject } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from "swiper"
import 'swiper/css'
import 'swiper/css/pagination'
import { Start, End } from '@/hook/animation'

interface serviceData {
    rank: number,
    type: {
        id: number,
        cover_image: string | any,
        name: string,
        descr: string
    }
}

const props = defineProps<{ solutionList: serviceData["type"], rank: serviceData["rank"], isAbout: any }>()
const { solutionList } = props
const rankValue = ref(0)
const isAbout = ref(0)
rankValue.value = props.rank
isAbout.value = props.isAbout
const emit = defineEmits(["goSolution"])
const goSolution = (val: any) => {
    emit("goSolution", val)
}

watch(() => props.rank, (newValue) => {
    rankValue.value = newValue
}, { immediate: true })

const onMouseEnter = (item: any) => {
    /**
     * @methods 移入 
     */
    let dom1 = document.getElementById(item.id + 'text')
    let dom2 = document.getElementById(item.id + 'btn')
    Start(dom1, dom2)
}

const onMouseLeave = (item: any) => {
    /**
       * @methods 移出
       */
    let dom1 = document.getElementById(item.id + 'text')
    let dom2 = document.getElementById(item.id + 'btn')
    End(dom1, dom2)
}

const myFn = inject<any>("open")

const modules = ref([Navigation])


</script>

<template>
    <div class="ove_h">
        <div class="content">
            <div class="about_box" v-if="isAbout == 1">
                <div class="bigTitle">仲恺数字化产品体系</div>
                <div class="contentText service_second_title">支持园区、写字楼、共享办公、宿舍等多种业态</div>
            </div>
            <div class="service_box" v-else>
                <div>
                    <div class="bigTitle">仲恺数字化产品体系</div>
                    <div class="contentText service_second_title">助力园区运营管理全面提升，驱动园区价值增长</div>
                </div>
                <el-button color="#064DD6" size="large" v-if="rankValue == 0" round @click="myFn()">马上咨询</el-button>
            </div> 
            <div v-if="rankValue == 0">
                <el-row :gutter="20">
                    <el-col :span="6" :xs="24" v-for="item in solutionList" :key="item.id" @click="goSolution(item)">
                        <div class="service_type_box pointer scaleImgCard" @mouseenter="onMouseEnter(item)"
                            @mouseleave="onMouseLeave(item)">
                            <div class="service_type_img">
                                <img :src="item.cover_image" alt="">
                            </div>
                            <div class="secondTitle service_type_title">{{ item.name }}</div>
                            <div class="contentText service_type_des">{{ item.descr }}</div>
                            <div class="service_type_btn" :id="String(item.id) + 'btn'">
                                <el-button color="#064DD6" size="large" round @click="goSolution(item)">点击查看</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <swiper class="swiper" :modules="modules" :space-between="30"
                    :slides-per-view="rankValue == 0 ? 3 : 1" :free-mode="true" :pagination="{ clickable: true }">
                    <swiper-slide class="slide" v-for="item in solutionList" :key="item.id" @click="goSolution(item)">
                        <div class="service_type_box pointer">
                            <div class="service_type_img">
                                <img :src="item.cover_image" alt="">
                            </div>
                            <div class="secondTitle service_type_title">{{ item.name }}</div>
                            <div class="contentText service_type_des">{{ item.descr }}</div>
                            <div class="service_type_btn" :id="String(item.id) + 'btn'">
                                <el-button color="#064DD6" size="large" round @click="goSolution(item)">点击查看</el-button>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    margin: 0 auto;
    padding: 60px 0 60px 0 !important;
}

.about_box{
    margin-bottom: 40px;
}

.service_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.service_second_title {
    margin-top: 28px;
}

.service_type_box {
    text-align: center;
    background-color: #FAFCFF;
    padding: 25px 50px;
    border-radius: 10px;
    position: relative;

    .service_type_img {
        width: 100px;
        height: 100%;
        // height: 130px;
        margin: 0 auto;

        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }

    .service_type_title {
        margin-top: 38px;
    }

    .service_type_des {
        text-align: center;
        margin: 30px 0 60px 0;
    }
}

.service_type_box:hover {
    background-color: #FAFCFF;
    border-radius: $cardRadius;
    // box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
    /* img{
        transform: scale(1.1);
    } */
}

.service_type_img {
    width: 21px;
    height: 21px;
}

.service_type_btn {
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, 0px);
    opacity: 0;
    margin-top: 10px;
}

@media screen and (max-width:450px) {
    .service_type_box {
        padding: 25px 10px;
        // margin: 0 20px;

        .service_type_title {
            margin-top: 15px;
        }

        .service_type_des {
            margin: 30px 0;
        }
    }

    .content{
        padding: 30px 16px !important;
    }
}
</style>